<template>
  <div class="addGoodinput">
    <div class="box">
      <el-alert
        :closable="false"
        title="消息提示的文案"
        type="info"
        center
        show-icon
      >
      </el-alert>
      <div class="bottomDiv padDiv">
        <el-steps :active="active" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
      <div class="bottomDiv">
        <el-tabs tab-position="left" @tab-click="handleClick">
          <el-tab-pane label="基本信息">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="price">
                <el-input v-model="ruleForm.price"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" prop="num">
                <el-input v-model="ruleForm.num"></el-input>
              </el-form-item>
              <el-form-item label="商品重量" prop="weight">
                <el-input v-model="ruleForm.weight"></el-input>
              </el-form-item>
              <el-form-item label="分类" prop="classify">
                <el-cascader
                  :options="options"
                  :props="{
                    checkStrictly: true,
                    label: 'cat_name',
                    value: 'cat_id',
                  }"
                  ref="refSubCat"
                  @change="onChange"
                  clearable
                  v-model="budgetForm.allOrg"
                >
                </el-cascader>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="商品参数">
            <p class="marP">{{ commParame.attr_name }}</p>
            <el-tag
              :key="tag"
              v-for="tag in commParList"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
          </el-tab-pane>
          <el-tab-pane label="商品属性"
            ><el-form
              label-position="top"
              label-width="80px"
              :model="formLabelAlign"
            >
              <el-form-item
                v-for="item in commoditypro"
                :key="item.cat_id"
                :label="item.attr_name"
              >
                <el-input
                  v-model="formLabelAlign.name"
                  :placeholder="item.attr_vals"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="商品图片">
            <el-upload
              class="upload-demo"
              action="http://47.102.159.133:8888/api/private/v1/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容">
            <vue-futext></vue-futext>
            <el-button type="primary" @click="onBtn">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import user from "@/api/user";
import VueFutext from "./VueFutext.vue";

export default {
  components: { VueFutext },
  name: "addGoodinput",
  data() {
    return {
      active: 0, //步骤条
      content: "这里是要发布的内容",
      fileList: [],
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      titles: "", //参数标题
      commParame: {}, //参数列表
      commParList: [], //参数列表标签
      commoditypro: [], //商品属性列表
      inputVisible: false,
      inputValue: "",
      ids: "", //三级联动最后的id
      budgetForm: {
        allOrg: [], //数组-回显
      },
      ruleForm: {
        name: "", //姓名
        price: "", //价格
        num: "", //数量
        weight: "", //重量
        value: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        num: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
        weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
      },
      options: [],
    };
  },
  created() {
    let _this = this;
    user.getClassify().then((res) => {
      _this.options = res.data.data;
    });
  },
  watch: {
    ids() {
      //商品参数
      let _this = this;
      user.getGoodsattr(this.ids).then((res) => {
        _this.commParame = res.data.data[0];
        _this.commParList = _this.commParame.attr_vals.split(",");
      });
      user.getGoodsattrList(this.ids).then((res) => {
        _this.commoditypro = res.data.data;
      });
    },
  },
  methods: {
    handleClick(o, n) {
      this.active = parseInt(o.paneName) + 1;
    },
    onBtn() {
      user.postGoods(this.ruleForm).then((res) => {
        console.log(res);
      });
      this.$message.error("添加失败");
    },
    onChange() {
      this.ids = this.$refs["refSubCat"].getCheckedNodes()[0].path[2];
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style>
.marP {
  margin: 20px 0;
}
.addGoodinput {
  width: calc(100vw - 201px);
  height: 700px;
  padding: 15px;
  box-sizing: border-box;
}
.box {
  width: calc(100vw - 230px);
  height: 670px;
}
.bottomDiv {
  width: calc(100vw - 350px);
  margin: 0 auto;
  margin-top: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.padDiv {
  padding: 0 100px;
  box-sizing: border-box;
}
.el-alert--info.is-light {
  color: white;
  background: #909399;
}
</style>